<template>
	<view class="customer">
		<u-gap height="40rpx" />
		<picker mode="date" :value="date" fields="year" @change="bindDateChange">
			<view class="flex_wrap row_middle" @click="show = true">
				<text style="font-size:28rpx">{{newYear}}年</text>
				<u-icon name="arrow-down-fill" color="#666666" size="11"></u-icon>
			</view>
		</picker>
		<!-- 对应数据 -->
		<view class="customer_infos" v-for="(item, index) in salesManList" :key="index">
			<view class="enterprise_tops flex_wrap row_middle">
				<text class="enterprise_bg"></text>
				<u--text :text="item.currentDate+'月'" size='32rpx' blod />
				<!-- <u--text :text="`${item.currentDate.split('.')[1]}`+'月'" size='32rpx' blod /> -->
			</view>
			<view class="customer_info_detail">
				<image class="customer_info_img"
					src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/7273cd699a3244618d151fff1f963ed2.png"
					mode=""></image>
				<view class="customer_info flex_wrap row_around row_middle">
					<view>
						<view class="customer_info_t">
							会议参与度
						</view>
						<view class="customer_info_t">
							已主办<text class="customer_info_tt">{{item.hostCount}}</text>场
						</view>
						<view class="customer_info_t">
							已参加<text class="customer_info_tt">{{item.joinCount}}</text>场
						</view>
					</view>
					<view class="superior_dashed"></view>
					<view>
						<view class="customer_info_t">
							客户数据
						</view>
						<view class="customer_info_t">
							领取<text class="customer_info_tt">{{item.receiveCount}}</text>份
						</view>
						<view class="customer_info_t">
							签到<text class="customer_info_tt">{{item.signCount}}</text>人
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="salesManList.length == ''">
			<view class="headImage"><u-image
					src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
					width="408rpx" height="408rpx" /></view>
			<u-text text="暂无数据" color="#999" size="22rpx" align="center"></u-text>
		</view>
	</view>
</template>

<script>
	import {
		salesMan
	} from '@/api/manageSalesman';
	export default {
		data() {
			return {
				date: '',
				show: false,
				salesManList: [],
				newYear: '',
				salesmanId: ''
			}
		},
		onLoad(option) {
			this.name = option.salesmanName
			// 使用 uni.setNavigationBarTitle 替换 wx.setNavigationBarTitle，支持跨平台
			uni.setNavigationBarTitle({
				title: this.name,
			})
			this.salesmanId = option.salesmanId
			var date = new Date();
			let newYear = date.getFullYear(); //获取完整的年份(4位)
			this.newYear = newYear
			setTimeout(() => {
				this.getsalesManr(this.salesmanId, this.newYear)
			}, 500)
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			bindDateChange(e) {
				this.newYear = e.target.value;
				let newYear = e.target.value;
				this.getsalesManr(this.salesmanId, this.newYear)
			},
			async getsalesManr(salesmanId, year) { //年份队员对应内容
				const res = await salesMan(salesmanId, year)
				if (res.code === 200) {
					this.salesManList = res.data
					res.data.forEach(item => {
						let yue = item.currentDate.split(".");
						let danyue = yue[1];
						if (danyue < 10) {
							danyue = danyue.split("0")
							danyue = danyue[1]
							item.currentDate = danyue
						} else {
							item.currentDate = danyue
						}
					})
					this.salesManList.reverse()
				}
			},
		},
	}
</script>

<style>
	.customer {
		background-color: #FFFFFF;
		width: 100%;
		height: 100vh;
		color: #333333;
		padding: 0 28rpx;
	}

	/* 对应数据 */
	.customer_infos {
		width: 100%;
		height: 340rpx;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
		margin: 40rpx 0;
		border-radius: 20rpx;
		position: relative;
	}

	.enterprise_tops {
		padding: 20rpx;
	}

	.enterprise_bg {
		display: block;
		width: 8rpx;
		height: 28rpx;
		background: #588BF3;
		margin-right: 10rpx;
	}

	.customer_info_detail {
		padding: 8rpx 24rpx 20rpx 28rpx;
	}

	.customer_info {
		position: absolute;
		z-index: 6;
		text-align: center;
		height: 228rpx;
		width: 642rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 17px;
	}

	.superior_dashed {
		width: 0rpx;
		height: 156rpx;
		border: 4rpx dashed rgba(255, 255, 255, 0.8);
	}

	.customer_info_t {
		margin: 26rpx 0;
	}

	.customer_info_tt {
		font-size: 32rpx;
		font-weight: bold;
	}

	.customer_info_img {
		position: absolute;
		z-index: 1;
		height: 228rpx;
		width: 642rpx;
	}

	.headImage {
		width: 408rpx;
		height: 408rpx;
		margin: 300rpx auto 40rpx;
	}
</style>
